<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
<!-- 
  - Author(s): waffie
  - Date: 2020-08-21 15:55:35
  - Description:
-->
<head>
<title>项目切换</title>
<%@include file="/resource/template1.jsp"%>
<style type="text/css">
.page-arrow-left, .page-arrow-right { margin-top:-30px; font-size:60px; color: rgba(0,0,0,.2); position:absolute; top:50%; cursor:pointer; }
.page-arrow-left { display:none; left:10px; }
.page-arrow-right { right:10px; }
.frameContent{ float:left; }
#pageFrame { width:100%; height:100%; position: absolute; }
</style>
</head>
<body class="fullBody">
    <div class="nui-fit" style="overflow:hidden;">
		<div id="pageFrame"></div>
    </div>
	<div class="page-arrow-left" onclick="pageSwitch(0)"><i class="fa fa-arrow-circle-left"></i></div>
	<div class="page-arrow-right" onclick="pageSwitch(1)"><i class="fa fa-arrow-circle-right"></i></div>
<script type="text/javascript">
nui.parse();

var pageWidth = $("body").width();

// 页面加载完成后执行
$(function(){
	var projectData = [
		{ id: 101, name: '项目一' },
		{ id: 102, name: '项目二' },
		{ id: 103, name: '项目三' },
		{ id: 104, name: '项目四' },
		{ id: 105, name: '项目五' },
	];
	var dataHtml = '';
	$.each(projectData, function(i, d){
		var params = '?projectId='+ d.id +'&projectName='+ d.name;
		var url = 'pageProjectDetail.jsp'+ encodeURI(encodeURI(params));
		dataHtml += '<iframe class="frameContent" osrc="'+ url +'" frameborder="0" scrolling="no" style="width:'+ pageWidth +'px;height:100%;"></iframe>';
	});
	$("#pageFrame").html(dataHtml).width(projectData.length*pageWidth);
	setFrameUrl(0);
	setFrameUrl(1);
});

// 设置iframe的url
var setFrameUrl = function(n){
	var curFrame = $(".frameContent").eq(n);
	if (!curFrame.attr("src")) {
		var url = curFrame.attr("osrc");
		curFrame.attr("src", url);
	}
}

// 页面切换
var pageNumber = 0;
var pageSwitch = function(type) {
	if (type == 0){
		pageNumber -= 1;
		$("#pageFrame").animate({ 'left': '+=' + pageWidth });
	}
	else if (type == 1){
		pageNumber += 1;
		$("#pageFrame").animate({ 'left': '-=' + pageWidth });
	}
	var frameContent = $(".frameContent");
	$(".page-arrow-left, .page-arrow-right").show();
	if (pageNumber == 0) $(".page-arrow-left").hide();
	if (pageNumber == frameContent.length - 1) $(".page-arrow-right").hide();
	setFrameUrl(pageNumber+1);
}
</script>
</body>
</html>